<template>
  <div style="overflow-x: auto">
    <!-- v-model="items[i]" -->
    <div class="commentBox">
      <!-- 注释树形菜单 -->
      <NotesTree
        @remove="remove"
        @addSubComment="addSubComment"
        @addKeyValue="addKeyValue"
        :list="items"
      ></NotesTree>
      <!-- 按钮添加自定义注解 -->
      <el-button @click="Addinput" size="mini" class="addCustom"
        ><i
          class="el-icon-plus"
          style="font-weight: 600; margin-right: 5px"
        />添加自定义注解</el-button
      >
    </div>
  </div>
</template>

<script>
//动态id 先这么写 不然节点增删改 会出现错乱问题
let id = 1000;
let idTest = 1;
import NotesTree from "./components/NotesTree";
import { generateId } from "@/utils/index";
export default {
  props: {
    customOptionValue: {
      type: Array,
      default: () => [],
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    NotesTree,
  },
  data() {
    return {
      level: 0,
      // items: [],
      lablePosition: "left",
      CustomAnnotationShow: false,
      customAnnotation: {
        customAnnotationSwitch: false,
      },
      addAnnotation: {
        name: "",
        key: "",
        value: "",
        queryContextStartIndex: [],
        queryContextEndIndex: [],
        annotations: [],
        indexstart: [],
        indexend: [],
      },
      valueData: [],
    };
  },
  watch: {
    customOptionValue: {
      handler: function (newData, oldData) {
        if ("" !== newData && newData != undefined) {
          let tempdata = JSON.parse(JSON.stringify(newData)); //获取到的是数组对象
          this.valueData = tempdata;
          if (tempdata.length > 0) {
            this.customAnnotation.customAnnotationSwitch = true;
            this.CustomAnnotationShow = true;
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //添加键值
    addKeyValue(data) {
      // isKey 代表是 键值 渲染键值的dom
      const newChild = {
        id: generateId(),
        label: "key",
        value: "value",
        isKey: true,
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.unshift(newChild);
    },
    //删除节点
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
      // for (var i = children.length - 1; i >= 0; i--) {
      //   if (i == index) {
      //     children.splice(index, 1);
      //   }
      // }
    },
    // 添加input框
    Addinput() {
      this.items.push({
        label: "x",
        isKey: false, //false 是子注释 true是键值
        children: [],
        id: generateId(),
      });
    },
    // 添加子注释
    addSubComment(data) {
      const newChild = {
        id: generateId(),
        label: "x" + id,
        isKey: false,
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    // // 添加三级注释
    // addLevelThreeInput(val, index) {
    //   this.items[index].childInputBox[index].grandsonInput.push({
    //     grandsonvalue: "",
    //   });
    // },
    // // 删除input框
    // Delinput(i) {
    //   this.items.splice(i, 1);
    // },
    // // 删除子注释input框
    // DelChildInput(i, index) {
    //   console.log("i和index", i, index);
    //   this.items[i].childInputBox.splice(index, 1);
    // },
    // // 删除三级注释
    // DelLevelThreeInput(i, index, LevelThreeindex) {
    //   this.items[i].childInputBox[index].grandsonInput.splice(
    //     LevelThreeindex,
    //     1
    //   );
    // },
    // clickCustomAnnotationShow() {
    //   this.CustomAnnotationShow = !this.CustomAnnotationShow;
    // },
    // addToAnnotation() {
    //   if (
    //     this.addAnnotation.name == "" ||
    //     this.addAnnotation.key == "" ||
    //     this.addAnnotation.value == ""
    //   ) {
    //     return;
    //   } else {
    //     this.valueData.unshift(this.addAnnotation);
    //   }
    //   this.addAnnotation = {
    //     name: "",
    //     key: "",
    //     value: "",
    //     queryContextStartIndex: [],
    //     queryContextEndIndex: [],
    //     annotations: [],
    //     indexstart: [],
    //     indexend: [],
    //   };
    // },

    // delToAnnotation(index, rows) {
    //   this.valueData.splice(index, 1);
    // },
  },
};
</script>

<style scoped>
.buildInput {
  padding-top: 10px;
}
.CustomText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
}
.commentBox {
  /* margin-top: 5px; */
  width: 400px;
  /* background-color: rgba(233, 233, 233, 0.3); */
}
.commentBox /deep/ .el-input-group__prepend {
  padding: 0 5px;
}
.addCustom {
  margin: 20px 0 15px 18px;
  width: 365px;
  border: 1px solid rgba(153, 153, 153, 1);
}
.Inputbox {
  margin-left: 10px;
  width: 65%;
}
.childInputbox {
  margin-left: 10px;
  width: 81%;
}
.svgmore {
  margin-left: 10px;
}
.CommentName {
  margin-left: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
}
.el-icon-caret-bottom {
  margin-right: 5px;
}
.childitem {
  margin-top: 10px;
  margin-left: 99px;
}
</style>
